<template>
  <a-spin dot :loading="isLoading" style="height: 100%">
    <div class="app-container business-container">
      <a-breadcrumb style="margin-bottom: 20px">
        <a-breadcrumb-item>{{ routeName1 }}</a-breadcrumb-item>
        <a-breadcrumb-item>{{ label }}</a-breadcrumb-item>
      </a-breadcrumb>
      <micro-app
        v-if="!isError"
        class="micro-app"
        name="business"
        :url="appUrlConfig.business"
        baseroute="/business"
        :data="{ token: getToken() }"
        router-mode="native"
        @mounted="microAppMounted"
        @error="onError"
      />
      <ErrorPage v-else :code="500"></ErrorPage>
    </div>
  </a-spin>
</template>

<script setup>
import Breadcrumb from "@/components/Breadcrumb/index.vue";
import { getToken } from "@/utils/auth";
import defaultConfig from "@/config/setting.json";
import appUrlConfig from "@/config/appUrlconfig";
import ErrorPage from "@/views/error/components/ErrorPage.vue";
import { mainReceiveData } from "@/microApp/utils";

const url = [
  {
    path: "products",
    name: "商品中心"
  },
  {
    path: "suppliers",
    name: "供应商管理"
  },
  {
    path: "oder",
    name: "订单管理"
  },
  {
    path: "procure",
    name: "采购管理"
  }
];

const isLoading = ref(true);
const microAppMounted = () => {
  isLoading.value = false;
};

const isError = ref(false);
const onError = () => {
  isError.value = true;
  isLoading.value = false;
};
const routeName1 = ref("");
const label = ref("");
mainReceiveData("business", data => {
  label.value = data?.meta?.title ?? "";
  const obj = url.find(item => data?.path.includes(item.path));
  routeName1.value = obj?.name || "商家端";
});
</script>

<style scoped lang="scss">
.business-container {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
.micro-app {
  height: calc(100% - 44px);
  overflow-y: auto;
}
:deep(micro-app-body) {
  height: 100%;
  background-color: white;
  border-radius: 10px;
}
</style>
